<script setup>
  import { RouterLink, RouterView } from 'vue-router';
  import { reactive, computed, watch, ref, onMounted, useTemplateRef } from 'vue';
  import CardWebLog from '../components/CardWebLog.vue';
  import Textarea from '@/components/Textarea.vue';
  import HTTPserver from '@/js/HTTPserver';
  import TextEditor from '@/components/TextEditor.vue';
  import userTool from '@/js/userTool';
  import utilTool from '@/js/utilTool';
  const webLog = ref();
  const newWebLog = ref({
    sort: '',
    title: '',
    description: '',
    date: '',
  });
  newWebLog.value.date = utilTool.getDate();
  const texteditorTitle = useTemplateRef('texteditorTitle');
  const texteditorDescription = useTemplateRef('texteditorDescription');

  const height = ref('0rem');
  function openOrCloseTextarea() {
    if (height.value == '0rem') {
      height.value = '25rem';
    } else {
      height.value = '0rem';
    }
  }

  HTTPserver.getWebLog(webLog);
  function saveWebLog() {
    newWebLog.value.title = texteditorTitle.value.getText();
    newWebLog.value.description = texteditorDescription.value.getHtml();
    if (utilTool.isEmpty(newWebLog.value.title)) {
      alert('标题为空哦');
      return;
    }
    if (utilTool.isEmpty(newWebLog.value.description)) {
      alert('内容为空哦');
      return;
    }
    HTTPserver.addWebLog(newWebLog, addWebLogAfter);
  }

  function addWebLogAfter() {
    height.value = '0rem';
    texteditorTitle.value.clearText();
    texteditorDescription.value.clearText();
    HTTPserver.getWebLog(webLog);
  }

  function delWebLog(sort, title, description, date) {
    let webLog = {
      sort: sort,
      title: title,
      description: description,
      date: date,
    };
    HTTPserver.delWebLog(webLog, delWebLogAfter);
  }

  function delWebLogAfter() {
    HTTPserver.getWebLog(webLog);
  }

  const realUser = ref({
    id: '',
    name: '访客',
    level: '0',
  });
  onMounted(() => {
    refresh();
  });
  function refresh(type) {
    if (utilTool.isEmpty(type)) {
      userTool.getUserInfo(realUser);
    } else {
      realUser.value.id = '';
      realUser.value.name = '访客';
      realUser.value.level = '0';
    }
  }
</script>

<template>
  <div>
    <!-- <div class="text_H2 margin_LT">网站日志</div> -->
    <div class="panel_N1">
      <div class="card_special color_white" v-if="realUser.level >= 6">
        <div
          class="text_H3"
          style="width: 100%; height: 10%; padding: 1rem; cursor: pointer"
          v-on:click="openOrCloseTextarea"
        >
          <img
            style="width: 1.25rem; height: 1.25rem; position: relative; bottom: -0.3rem"
            class="img"
            src="../assets/icon/添加.svg"
          />
          添加一份新日志
        </div>
        <div class="textarea" :style="{ height: height }">
          <TextEditor
            ref="texteditorTitle"
            class="text_H3"
            placeholder="标题"
            height="10%"
            :scroll="false"
            :read-only="false"
            :maxLength="16"
          ></TextEditor>
          <TextEditor
            ref="texteditorDescription"
            class="text_H5"
            placeholder="正文"
            height="65%"
            :scroll="false"
            :read-only="false"
          ></TextEditor>
          <div class="text_H5" style="width: 100%; text-align: right; padding: 1rem">{{ newWebLog.date }}</div>
          <button class="text_H6 button_N7" v-on:click="saveWebLog">提交</button>
        </div>
      </div>
      <CardWebLog
        v-for="(item, index) in webLog"
        :sort="item.sort"
        :title="item.title"
        :description="item.description"
        :date="item.date"
        @delWebLog="delWebLog"
      ></CardWebLog>
    </div>
  </div>
</template>
<style scoped></style>
